<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="23" style="text-align: center">
        {{ src.displayName }}
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain size="mini" @click="handleUpdate" v-hasPermi="['img:img:edit']">编辑</el-button>
      </el-col>
    </el-row>
    <hr />
    <el-image :src="src.src" :fit="'fill'" style="width: 100%; height: calc(100vh - 180px)">
      <div slot="placeholder" class="image-slot">
        加载中<span class="dot">...</span>
      </div>
    </el-image>
    <div style="
        position: absolute;
        top: 50%;
        display: flex;
        justify-content: space-between;
        width: 100%;
      ">
      <el-button icon="el-icon-arrow-left" circle @click="arrowLeft"></el-button>
      <el-button style="margin-right: 41px" icon="el-icon-arrow-right" circle @click="arrowRight"></el-button>
    </div>
    <!-- 添加或修改组织机构图对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="950px" append-to-body>
      <div v-if="showSetUp">
        <FileImageUpload @addNum="getNum"></FileImageUpload>
      </div>
      <el-table :data="imgList" style="width: 100%">
        <el-table-column prop="displayName" label="标题" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.displayName" placeholder="请输入图片名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="src" label="图片" align="center">
          <template slot-scope="scope">
            <image-preview :src="scope.row.src" :width="50" :height="50" />.{{
              scope.row.extName
            }}
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.sort" :min="1" :max="10"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="delPicture(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listImg, getImg, delImg, addImg, updateImg } from "@/api/biz/img/img";
const emptyImg = require("@/assets/images/noData.png")
export default {
  name: "Img",
  data() {
    return {
      // 组织机构图表格数据
      imgList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      showSetUp: false,
      src: {
        displayName: "暂无数据",
        src: emptyImg,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询组织机构图列表 */
    getList() {
      listImg().then((response) => {
        this.imgList = response.rows;
        this.src = {
          displayName: "暂无数据",
          src: emptyImg,
        }
        if (this.imgList.length > 0) {
          this.imgList.forEach((item) => {
            item.src =
              process.env.VUE_APP_MINIO_BASE_API +
              "/" +
              item.bucket +
              "/" +
              item.realName;
          });
          this.src = this.imgList[0];
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.$nextTick(() => (this.showSetUp = false));
    },
    /** 编辑按钮操作 */
    handleUpdate() {
      this.open = true;
      this.getList();
      this.$nextTick(() => (this.showSetUp = true));
      this.title = "编辑";
    },
    /** 提交按钮 */
    submitForm() {
      this.imgList.forEach((item) => {
        item.src = undefined;
      });
      updateImg(this.imgList).then((response) => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },
    getNum(childNum) {
      this.getList();
    },
    delPicture(data) {
      let id = data.id;
      delImg(id).then((response) => {
        this.getList();
      });
    },
    arrowRight() {
      for (let i = 0; i < this.imgList.length; i++) {
        if (this.src == this.imgList[i]) {
          if (i == this.imgList.length - 1) {
            return (this.src = this.imgList[0]);
          }
          let a = i + 1;
          return (this.src = this.imgList[a]);
        }
      }
    },
    arrowLeft() {
      for (let i = 0; i < this.imgList.length; i++) {
        if (this.src == this.imgList[i]) {
          if (i == 0) {
            return (this.src = this.imgList[this.imgList.length - 1]);
          }
          let a = i - 1;
          return (this.src = this.imgList[a]);
        }
      }
    },
  },
};
</script>
